// 商品
<template>
  <div>
    <div style="text-align:left;padding:10px 0;">
      <Button type="primary" size="small" @click="addUserFun">新增</Button>
    </div>
    <Table :height="height" :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="showModel(row)">修改</Button>
        <Button
          v-if="row.state === 0"
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="remove(row, 1)"
        >启用</Button>
        <Button v-if="row.state === 1" type="error" size="small" @click="remove(row, 0)">停用</Button>
      </template>
    </Table>
    <Page
      :current="pageNum"
      :total="total"
      :page-size="pageSize"
      style="margin: 10px 0 0 10px;text-align:left;"
      class="wrapper-page"
      size="small"
      show-elevator
      show-total
      @on-change="pageChange"
    />
    <Modal v-model="modalShow" :footer-hide="true" :title="title">
      <div style="padding-right: 40px;">
        <Form :model="formItem" :label-width="80">
          <!-- <FormItem label="Id">
              <Input v-model="formItem.id" placeholder="ID" />
          </FormItem>-->
          <FormItem label="商品名称">
            <Input v-model="formItem.productName" placeholder="商品名称" />
          </FormItem>
          <FormItem label="价格">
            <Input v-model="formItem.price" placeholder="价格" />
          </FormItem>
          <FormItem label="数量">
            <Input v-model="formItem.number" placeholder="数量" />
          </FormItem>
          <FormItem label="原产地">
            <Input v-model="formItem.placeOfOrigin" placeholder="原产地" />
          </FormItem>
          <FormItem style="text-align:right">
            <Button style="margin-right:5px" type="primary" @click="cancelFun()">取消</Button>
            <Button type="primary" @click="submitFun()">确认</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getCommodity, addCommodity, updateCommodity } from '@/api/user'

export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      height: 0,
      pageNum: 1, // 当前页码
      total: 0, // 数据总数
      pageSize: 3, // 每页条数
      title: '新增商品',
      modalShow: false,
      columns1: [
        // {
        //   title: 'ID',
        //   key: 'id'
        // },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '价格',
          key: 'price'
        },
        {
          title: '数量',
          key: 'number'
        },
        {
          title: '日期',
          key: 'dateline'
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            return h('span', params.row.state === 1 ? '启用' : '停用')
          }
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 130,
          align: 'center'
        }
      ],
      data1: [],
      formItem: {
        id: '',
        userName: ''
      }
    }
  },
  methods: {
    cancelFun () {
      this.modalShow = false
    },
    submitFun () {
      if (this.title === '新增商品') {
        addCommodity(this.formItem).then(res => {
          if (res.code === 1) {
            this.modalShow = false
            this.$Message.success('新增成功！')
            this.queryData()
          } else {
            this.$Message.error('新增失败！')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        updateCommodity(this.formItem).then(res => {
          if (res.code === 1) {
            this.modalShow = false
            this.$Message.success('修改成功！')
            this.queryData()
          } else {
            this.$Message.error('修改失败！')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    hrefFun () {
      this.$router.push({
        name: 'about'
      })
    },
    queryData () {
      getCommodity({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 1) {
          this.data1 = res.data
          this.total = res.total
        } else {
          this.data1 = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    addUserFun () {
      this.title = '新增商品'
      this.modalShow = true
      this.formItem = {}
    },
    showModel (row) {
      this.title = '修改用户'
      this.formItem = row
      this.modalShow = true
    },
    remove (row, type) {
      updateCommodity({
        id: row.id,
        state: type
      }).then(res => {
        if (res.code === 1) {
          this.queryData()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    pageChange (page) {
      this.pageNum = page
      this.queryData()
    }

  },
  mounted () {
    this.$nextTick(() => {
      this.height = document.body.clientHeight - 140
      this.queryData()
    })
    this.height = document.body.clientHeight - 140
    this.queryData()
  }
}
</script>
